<template>
  <div id="education" class="box-body">
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">教育信息</h3>
      </div>
      <div class="box-body">
        <el-form :model="editeducation" :rules="rules" ref="editeducation" label-width="150px">
          <div class="row">
            <div class="col-md-4">
              <el-form-item label="全日制教育学位" :required='true'>
                <el-select :disabled="!isEditable" v-model="editeducation.ftDegree">
                  <el-option v-for="item in this.$store.state.sysconfigs.FtEducation" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="col-md-4">
              <el-form-item label="毕业院校专业" prop='ftDiscipline' :required='true'>
                <el-input :disabled="!isEditable" type="text" v-model="editeducation.ftDiscipline" placeholder="毕业专业信息"></el-input>
              </el-form-item>
            </div>
            <div class="col-md-4">
              <el-form-item label="毕业时间" prop='FtGraduateTime' :required='true'>
                <MyDatePicker :editable="isEditable" v-bind:date="editeducation.FtGraduateTime" @timeChanged="(time)=>this.editeducation.FtGraduateTime =time">
                </MyDatePicker>
              </el-form-item>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <el-form-item label="在职教育学位">
                <el-select :disabled="!isEditable" clearable v-model="editeducation.ptDegree">
                  <el-option v-for="item in this.$store.state.sysconfigs.FtEducation" :key="item.id" :label="item.name" :value="item.id" placeholder="请选择学位">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="col-md-4">
              <el-form-item label="毕业院校专业">
                <el-input :disabled="!isEditable" type="text" v-model="editeducation.ptDiscipline" placeholder="毕业专业信息"></el-input>
              </el-form-item>
            </div>
            <div class="col-md-4">
              <el-form-item label="毕业时间">
                <MyDatePicker :editable="isEditable" v-bind:date="editeducation.PtGraduateTime" @timeChanged="(time)=>this.editeducation.PtGraduateTime =time">
                </MyDatePicker>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import MyDatePicker from "../../mycomponents/common/MyDatePicker"
  export default {
    name: 'Education',
    props: ['education', 'editable'],
    components: {
      MyDatePicker
    },
    data: function() {
      var disciplineValidator = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入毕业院校专业'))
        } else {
          return callback()
        }
      };
      var ftgradetimevalidator = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入全日制毕业时间'))
        }
        return callback()
      };
      return {
        defaultValue: new Date(),
        rules: {
          ftDiscipline: [{
            validator: disciplineValidator,
            message: "请输入毕业院校专业",
            trigger: "blur"
          }],
          FtGraduateTime: [{
            validator: ftgradetimevalidator,
            message: "请输入全日制毕业时间",
            trigger: "blur"
          }]
          // PtGraduateTime: [{
          //   validator: ptgradvalidator,
          //   message: "请输入在职教育毕业时间",
          //   trigger: "change"
          // }]
        },
        isEditable: true,
        degrees: [],
        editeducation: {
          ftDegree: 4,
          ftDiscipline: '',
          FtGraduateTime: this.defaultValue,
          ptDegree: '',
          ptDiscipline: '',
          PtGraduateTime: this.defaultValue
        }
      }
    },
    created: function() {
      if (this.editable != null && this.editable != undefined) {
        this.isEditable = this.editable
      }
      this.degrees = this.$store.state.sysconfigs.FtEducation
      if (this.education) {
        for(var prop in this.education){
          this.editeducation[prop]=this.education[prop]
        }
      }
    },
    methods: {
      getData() {
        var validRes = true
        this.$refs.editeducation.validate((valid) => {
          if (valid) {
            validRes = true
          } else {
            console.log('education validate failed!!!');
            validRes = false
            return false;
          }
        });
        console.log("editeducation:", JSON.stringify(this.editeducation));
        if (!validRes) {
          return null
        }
        return this.editeducation
      }
    }
  }
</script>
